@import "~scss/variables";

.sw-button-group {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 1px;
    position: relative;

    &.sw-button-group--block {
        display: flex;
    }

    .sw-tooltip--wrapper > button.mt-button {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .mt-button {
        border-radius: 0;
        margin-left: -1px;
        position: relative;

        &:first-child {
            border-top-left-radius: $border-radius-default;
            border-bottom-left-radius: $border-radius-default;
            margin-left: 0;
        }

        &:last-child {
            border-top-right-radius: $border-radius-default;
            border-bottom-right-radius: $border-radius-default;
        }

        &:only-child {
            margin-left: -1px;
        }

        &.mt-button--primary,
        &.sw-button--critical,
        &.sw-button--contrast {
            position: static;
            margin-left: 0;
        }
    }

    .sw-context-button {
        .mt-button {
            border-radius: 0;

            &:first-child:has(+ .sw-popover) {
                margin-left: -1px;
            }
        }

        &:first-child .mt-button {
            border-top-left-radius: $border-radius-default;
            border-bottom-left-radius: $border-radius-default;
        }

        &:last-child .mt-button {
            border-top-right-radius: $border-radius-default;
            border-bottom-right-radius: $border-radius-default;
        }

        .mt-icon {
            padding: 4px;
        }
    }

    &.sw-button-group--split {
        > .mt-button {
            &.mt-button--primary,
            &.sw-button--critical,
            &.sw-button--contrast {
                position: relative;

                &:not(:first-child) {
                    margin-left: 8px;
                }
            }
        }

        .sw-context-button > .mt-button {
            &.mt-button--primary,
            &.sw-button--critical,
            &.sw-button--contrast {
                border-left: 1px solid rgba(0, 0, 0, 20%);
            }
        }

        .icon--small-arrow-medium-down {
            padding-bottom: 2px;
        }
    }

    .mt-button.mt-button--square {
        height: 100%;
        width: auto;
        aspect-ratio: 1;
    }
}
